<template>
  <span>
    <Descriptions :column="1" size="small">
      <DescriptionsItem label="应用ID">{{ data.appId }}</DescriptionsItem>
      <DescriptionsItem label="租户ID"> {{data.tenantId}}</DescriptionsItem>
      <DescriptionsItem label="TraceId"> {{data.traceId}}</DescriptionsItem>
      <DescriptionsItem label="原因">{{ data.errorReason }}</DescriptionsItem>
      <DescriptionsItem label="资源操作">{{ data.apiAction }}</DescriptionsItem>
      <DescriptionsItem label="服务名称">{{ data.iamCode }}</DescriptionsItem>
      <DescriptionsItem label="请求URL"> {{data.url}}</DescriptionsItem>
    </Descriptions>
    <a @click="handleClick" v-if="data.errorCode != ErrorCode.GATEWAY_NO_FOUNT_RESOURCE"> 去申请权限</a>
    <a v-if="showGoTips" @click="handleGoPermApplyPage">（查询权限申请记录）</a>
  </span>
</template>
<script lang="ts" name="PermissionApply" setup>
import { onMounted, ref, toRaw, onUnmounted } from 'vue';
import { Descriptions, DescriptionsItem } from 'ant-design-vue'
import pubsub from "pubsub-js"
import { ErrorCode } from '/@/enums/iamEnum'
const showGoTips = ref(false)
const props = defineProps({
  url: { type: String, default: null },
  data: { type: Object, default: {} },
})

const handleClick = () => {
  console.log('发布权限申请事件: permApply, props: ', toRaw(props))
  pubsub.publish("permApply", { ...toRaw(props) })
}

onMounted(() => {
  showGoTips.value = false
  pubsub.subscribe("permApplySuccess", (msg, data) => {
    showGoTips.value = true
  })
})

onUnmounted(() => {
  pubsub.unsubscribe("permApplySuccess")
})

/**
 * 因为当前页面是弹窗组件通过h方法渲染的, 直接引入路由会报错, 这里通过消息订阅通知跳转
 */
const handleGoPermApplyPage = () => {
  pubsub.publish("goPermApplyPage", {  })
}

</script>

<style lang="less" scope>
.apply-resource {
  text-align: left;
  border: 1px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 12px;
  text-overflow: ellipsis;
}
</style>
